<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box" class="one two" title="we" wd="123">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </div>
</body>
<script>

    // 通过css选择器查找元素
    // document.querySelector("#warp")     单元素查找，如果有多个，也默认返回第一个
    // document.querySelectorAll(".list")  多元素查找，只有一个也返回数组


    // 属性的查找、修改和删除(标签内没有该属性就新增，有就修改)
    // 除了可以获取和设置官方给定的属性名，也可以改自定义属性
    // (1)box.getAttributeNode(key) 根据属性名获取属性节点

    // (2)Element.getAttribute(key)  根据属性名获取属性值
    
    // (3)Element.setAttribute(key,val)  根据属性名设置属性值，返回undefine
    
    // (4)Element.removeAttribute(key)  根据属性名删除属性节点

    // 把属性删除后，前面获取的会有影响？
    // 先获取再删除没有影响
    // 先删除再获取有影响

    var box = document.getElementById("box");
    // var warp = document.querySelector("#id");
    console.log(box);
    // var one = document.querySelector(".one");
    // console.log(one);
    // var two = document.querySelectorAll(".two");
    // console.log(two[0]);
    // var li = document.querySelectorAll("li");
    // console.log(li[2]);

    var x = box.getAttributeNode("id")
    console.log(x);
    var id = box.getAttribute("id");
    console.log(id);
    // var clas = box.getAttribute("class");
    // console.log(clas);
    // var title = box.getAttribute("title");
    // console.log(title);
    // var wd = box.getAttribute("wd");
    // console.log(wd);

    // box.setAttribute("wd","345");
    // box.setAttribute("id","abc");
    
    // box.removeAttribute("id");
    // box.removeAttribute("class");
    // box.removeAttribute("title");
    // box.removeAttribute("wd");


</script>

</html>